<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="data-container" style="height: 400px; overflow-y: auto; border: 1px solid #ccc;"></div>
    <script>
        const dataContainer = document.getElementById('data-container');
        const totalItems = 10000;  // 10,000 条数据
        const batchSize = 100;     // 每次加载 100 条
        let currentIndex = 0;
        let loading = false;       // 标记是否正在加载

        function renderBatch() {
            if (loading) return;
            // 设置为正在加载
            loading = true
            // 创建文档片段，避免多次操作 DOM
            const fragment = document.createDocumentFragment();
             // 渲染一批数据
             for (let i = 0; i < batchSize && currentIndex < totalItems; i++, currentIndex++) {
                const item = document.createElement('div');
                item.textContent = `Item ${currentIndex + 1}`;
                item.style.height = '20px'; // 设置每条数据的高度
                fragment.appendChild(item);
             }
            // 将批次渲染的数据添加到容器中
            dataContainer.appendChild(fragment);

            // 标记加载完成
            loading = false;
        }
        function checkScroll() {
            // 检查是否滚动到底部
            const scrollTop = dataContainer.scrollTop;
            const scrollHeight = dataContainer.scrollHeight;
            const offsetHeight = dataContainer.offsetHeight;
            console.log('scrollTop', scrollTop, offsetHeight, scrollHeight)
            // 如果滚动到底部并且没有超过总条数
            if (scrollTop + offsetHeight >= scrollHeight - 10 && currentIndex < totalItems) {
                requestAnimationFrame(renderBatch);
            }
        }
                // 初始化时加载第一页
        requestAnimationFrame(renderBatch);
        // 监听滚动事件
        dataContainer.addEventListener('scroll', checkScroll);

        // 1. scrollTop
        // 定义: scrollTop 表示一个元素内容顶部到其可见内容区域顶部的距离。换句话说，它是元素当前被隐藏在上方的内容高度。

        // 单位: 像素。

        // 作用: 当用户在一个可滚动的元素中滚动时，scrollTop 会更新，以反映当前滚动的垂直距离。它的值为 0 时表示内容没有被滚动。

        // 使用场景: 通常用于获取或设置滚动位置。例如，在监听滚动事件时，可以通过 scrollTop 来判断用户已经滚动了多少距离，从而触发懒加载等操作。
    
        // 2. scrollHeight
        // 定义: scrollHeight 是元素内容的总高度，包括当前不可见的部分。它是元素在不考虑滚动条情况下的内容总高度。

        // 单位: 像素。

        // 作用: scrollHeight 是内容的总高度，不管内容是否在当前视口中可见。即使容器中有滚动条，scrollHeight 仍然表示整个内容的高度。

        // 使用场景: 常用于计算滚动位置相对于内容总高度的比例，或者判断是否已经滚动到底部。

        // 3. 它们的关系
        // 如果一个元素没有滚动过，scrollTop 的值为 0，而 scrollHeight 表示内容的完整高度。
        // 当 scrollTop + clientHeight 接近 scrollHeight 时，说明内容已经接近底部了，这个关系常用于实现“无限滚动”功能。

        // 4.
        // offsetHeight：返回元素的可见高度，包括内边距和边框，但不包括外边距。
    </script>
</body>
</html>